<template>
  <div class="payok">
    <Header>
      <template slot="left">
        <p>
          <svg-icon iconClass="back" @click="$router.push('/layout/home')" />
        </p>
      </template>
      <template slot="center">
        <p>支付成功</p>
      </template>
      <template slot="right">
        <p></p>
      </template>
    </Header>
    <main>
      <div class="zhifuok">
        <dt>
          <svg-icon iconClass="zhifuok" class="okicon" />
        </dt>
        <dd>
          <b>支付成功</b>
        </dd>
      </div>
      <div class="details">
        <p>
          <span>订单编号</span>
          <span>123123123</span>
        </p>
        <p>
          <span>订单金额</span>
          <span>{{this.$route.query.value}}元</span>
        </p>
        <p>
          <span>支付方式</span>
          <span v-if="this.$route.query.radio == '1'">微信</span>
          <span v-else-if="this.$route.query.radio == '2'">支付宝</span>
          <span v-else>银行卡</span>
        </p>
        <p>
          <span>支付时间</span>
          <span>{{new Date().toLocaleDateString()+"-"+new Date().toTimeString().slice(0,8)}}</span>
        </p>
      </div>
      <div class="paybtn">
        <van-button class="btn1" type="default">进入我的订单</van-button>
        <van-button type="info" class="btn2">继续逛逛</van-button>
      </div>
    </main>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
export default {
  components: {
    Header
  },
  created() {
  }
};
</script>

<style lang="scss" scoped>
@import "@css/style.scss";
.payok {
  width: 100%;
  height: 100%;
  .header {
    background: blueviolet;
  }
  main {
    .zhifuok {
      text-align: center;
      dt {
        padding-top: px2rem(40);
        padding-bottom: px2rem(20);
        .okicon {
          width: px2rem(75);
          height: px2rem(75);
        }
      }
      dd {
        padding-bottom: px2rem(60);
        b {
          font-size: px2rem(24);
        }
      }
    }
    .details {
      width: 100%;
      padding: 0 px2rem(10);
      font-size: px2rem(18);
      p {
        display: flex;
        justify-content: space-between;
        padding: px2rem(10) 0;
      }
    }
    .paybtn {
      width: 100%;
      display: flex;
      justify-content: space-around;
      margin-top: px2rem(70);
      .van-button {
        width: px2rem(150);
        height: px2rem(45);
        border-radius: px2rem(25);
        box-shadow: px2rem(2) px2rem(2) px2rem(5) #a9a9a9;
      }
      .btn1 {
        border: 1px solid #62b1f0;
        color: #62b1f0;
      }
      .btn2 {
        background: #138bec;
      }
    }
  }
}
</style>